<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <style>
        #log {
            font-family: 'Courier New', Courier, monospace;
            color: rebeccapurple;
            text-align: center;
        }

        .td {
            font-family: 'Courier New', Courier, monospace;

        }

        #table1 {
            border: 3px solid rebeccapurple;
            border-radius: 5px;
            margin: 0px auto;
            width: 500px;
            height: 100px;
        }

        .btn {
            border: 1px solid rebeccapurple;
            background-color: lightcoral;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload = function() {
            var message = "${message}";
            if (message != null && message != "") {
                alert(message);
            }
        };
        function checkUsername() {
            var reg=/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/
            var getUserName=document.getElementById("userName")
            var userName = getUserName.value
            var elUserName =document.getElementById("userNameCheck")
            if(!reg.test(userName)){
                elUserName.innerText="用户名输入不符合规范"
                return false
            }
                elUserName.innerText="OK"
                return true
        }
        function checkEmail() {
            var reg=/^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
            var email=document.getElementById("email").value
            var elEmail =document.getElementById("emailCheck")
            if(!reg.test(email)){
                elEmail.innerText="邮箱输入不符合规范"
                return false
            }
            elEmail.innerText="OK"
            return true
        }
        function checkUserPwd() {
            var reg=/[0-9]{4,11}$/;
            var getUserPwd=document.getElementById("userPwd");
            var userPwd = getUserPwd.value
            var elPwd =document.getElementById("userPwdCheck")
            if(!reg.test(userPwd)){
                elPwd.innerText="密码输入不符合规范"
                return false
            }
                elPwd.innerText="OK"
                return true
            
        }
        function checkUserPwdCheckAgain() {
            var getUserPwd=document.getElementById("userPwd");
            var userPwd = getUserPwd.value
            var getUserPwdAgain=document.getElementById("userPwdCheckAgain");
            var userPwdAgain = getUserPwdAgain.value

            var elPwdCheck =document.getElementById("userPwdCheckAgainCheck")
            if(checkUserPwd()){
                if(userPwd!=userPwdAgain){
                    elPwdCheck.innerText="密码输入不同"
                    return false
                }
                elPwdCheck.innerText="OK"
                return true
            }
            elPwdCheck.innerText="密码输入不符合规范"
            return false    
            
        }
        function checkForm(){
            var flag1 =checkUsername()
            var flag2 =checkUserPwd()
            var flag3 =checkUserPwdCheckAgain()
            var flag5 =checkEmail()
            var flag4 =flag1&&flag2&&flag3&&flag5
            if(flag4){
                return true
            }
            return false
        }
        function clear(){
            var elUserName =document.getElementById("userNameCheck")
            var elPwd =document.getElementById("userPwdCheck")
            var elPwdCheck =document.getElementById("userPwdCheckAgainCheck")
            var elEmail =document.getElementById("emailCheck")
            elUserName.innerText=""
            elPwd.innerText=""
            elPwdCheck.innerText=""
            elEmail.innerText=""
        }
    </script>
</head>

<body>
    <form action="/UserController?action=regist" method="post" onsubmit="return checkForm()">
        <h1 style="font-family: 'Courier New', Courier, monospace; text-align: center; color: rebeccapurple;">欢迎使用记账本系统
        </h1>
        <h2 id="log">请注册</h2>
        <table id="table1" border="1px">
            <tbody>
                <tr>
                    <td class="td">
                        请输入账号
                    </td>
                    <td>
                        <input type="text"  name="userName" id="userName" onblur="checkUsername()" style="border: 0px; width: 50%;">
                        <span id="userNameCheck"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td">
                        请输入邮箱
                    </td>
                    <td>
                        <input type="text"  name="email" id="email" onblur="checkEmail()" style="border: 0px; width: 50%;">
                        <span id="emailCheck"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td" id="mima">
                        请输入密码
                    </td>
                    <td>
                        <input type="password" name="userPwd" id="userPwd" onblur="checkUserPwd()" style="border: 0px; width: 50%;">
                        <span id="userPwdCheck"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td">
                        确认密码
                    </td>
                    <td>
                        <input type="password" id="userPwdCheckAgain" onblur="checkUserPwdCheckAgain()" style="border: 0px; width: 50%;">
                        <span id="userPwdCheckAgainCheck"></span>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="2">

                        <button class="btn" type="submit" >注册</button>
                        <input class="btn" type="reset" value="重置" onclick="clear()">
                        <button class="btn">
                            <a href="login.jsp" target="_self">去登录</a>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</html>